import React, { Component } from 'react';
import { BrowserRouter as  Redirect } from 'react-router-dom';
import { Card, List } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import MemoryUtils from '../utils/MemoryUtils';
import '../css/detail.css';
import LinkButton from './LinkButton';

const Item = List.Item;

export default class ArticalDetail extends Component {
    render() {
        const artical = MemoryUtils.artical;
        if(!artical || !artical.content_id) {
            return <Redirect to='/recommend' />
        }
        const title = (
            <span>
                <LinkButton onClick={()=> this.props.history.goBack()} ><ArrowLeftOutlined /></LinkButton>
                <span>文章详情</span>
            </span>
        )
        return (
            <div>
                <Card title={title} className='detail'>
                    <List>
                        <Item>
                            <span className='detail-left' >文章名称：</span>
                            <span>{artical.content_title}</span>
                        </Item>
                        <Item>
                            <span className='detail-left' >文章内容：</span>
                            <span>{artical.content_content}</span>
                        </Item>
                        <Item>
                            <span className='detail-left' >文章配图：</span>
                            <span>
                                <img src={artical.content_img} className='detail-img' />
                            </span>
                        </Item> 
                    </List>
                </Card>
            </div>
        )
    }
}
